今日針對 AJAX 的非同步進行說明
xhr.open('格式','網址',BooLean)
:在第 3 個參數區分非同步與同步
true
代表非同步,不會等資料回傳就繼續下一個動作,因此下一步不會取得資料,一般預設值false
代表同步,會等資料回傳才進行下一步,因此下一步可取得資料,但資料大時會需要等待而卡住那如何得知已經完成?可以使用 xhr.onload
// 先將資料讀取
var xhr = new XMLHttpRequest();
xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
xhr.send(null);
xhr.onload = function(){
console.log(xhr.responseText);
// 確定抓到 onload 才執行函數功能
}
xhr.status
增加確認狀態碼的判斷
index.html
<body>
<div class="message"></div>
<script src="JS/test.js"></script>
</body>
test.js
xhr.onload = function(){
// console.log(xhr.responseText);
if (xhr.status == 200){
var str = JSON.parse(xhr.responseText);
// 將資料轉成 JSON 格式的 array
document.querySelector('.message').textContent = str[0].name;
// 將 array[0]內的 name 印出來
} else {
console.log('資料錯誤');
}
};
// 假如正確取得顯示 王小名
// 否則錯誤顯示 錯誤訊息
}
Access-Control-Allow-Origin: *
, * 表示允許任何網域跨站存取資源進行 AJAX 的 post 部分